<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租用商品</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">租用商品</h3>
            </div>
            <div class="panel-body form-inline">
                <label>用户: {{username}} </label> &nbsp;&nbsp;&nbsp;&nbsp;
                <label>商品名称: {{goodname}} </label> &nbsp;&nbsp;&nbsp;&nbsp;
                <label>商品价格: {{goodprice}}/天 </label> &nbsp;&nbsp;&nbsp;&nbsp;
                <label for="">
                    租用数量:
                    <input type="text" v-model="number" class="form-control">&nbsp;&nbsp;
                </label>
                <label for="">
                    租用天数:
                    <input type="text" v-model="day" class="form-control">
                </label>
                <button @click="add();cut()" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
    Vue.http.options.emulateJSON = true;

    var vm = new Vue({
        el: "#app",
        data: {
            username: '',
            goodname: '',
            number: '',
            day: '',
            id: '',
            goodprice: '',
        },
        created() {
            this.getMes();
        },
        methods: {
            add: function () {
                this.$http.post('php/rent.php', {
                    username: this.username,
                    goodname: this.goodname,
                    number: this.number,
                    day: this.day,
                    goodprice: this.goodprice
                }, {
                    emulateJSON: true
                }).then(function (result) {
                    if (result.body.code == 0) {
                        alert("提交成功，2s后为您返回主页面");
                        setTimeout(function () {
                            location.href = "user_main.html";
                        }, 2000);
                    } else {
                        alert(result.body.message);
                    }
                })
            },
            cut: function () {
                this.$http.post('php/cut.php', {
                        goodname: this.goodname,
                        number: this.number,
                        id: this.id
                    }, {
                        emulateJSON: true
                    })
                    .then(function () {})
            },
            getMes: function () {
                this.username = JSON.parse(localStorage.getItem('name'));
                this.goodname = JSON.parse(localStorage.getItem('goodname'));
                this.id = JSON.parse(localStorage.getItem('id'));
                this.goodprice = JSON.parse(localStorage.getItem('goodprice'));
            }
        }
    })
</script>

</html>